<template>
	<view>
		<view>
			<image :src="iconFilePath" mode="aspectFit"></image>
		</view>
		
		<button @click="downloadImage" :disabled="downloading">
			{{ downloading ? '下载中...' : '下载图片' }}
		</button>
		
		<button @click="previewImage" :disabled="!iconFilePath">
			预览图片
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
				iconFilePath: "",
				downloading: false
			}
		},
		methods: {
			downloadImage() {
				this.downloading = true;
				
				const imagetask = uni.downloadFile({
					url: this.imageURL,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功');
							this.iconFilePath = res.tempFilePath;
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
					}
				});

				imagetask.onProgressUpdate((res) => {
					console.log('下载进度:', res.progress + "%");
					console.log('已下载:', res.totalBytesWritten);
					console.log('总大小:', res.totalBytesExpectedToWrite);
				});
			},
			
			previewImage() {
				if (this.iconFilePath) {
					uni.previewImage({
						urls: [this.iconFilePath]
					});
				}
			}
		}
	}
</script>
